<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="statistical-container">
    <div class="echarts-container" ref="echartsContainer"></div>
  </div>
</template>

<script setup>
import * as Echarts from "echarts";
import { ref, onMounted, defineProps, watch } from "vue";
import { option } from "./_statistical.js";
const props = defineProps(["data"]);

const echartsContainer = ref(null);
const echartsCharts = ref(null);
watch(
  () => props.data,
  curr => {
    if (echartsCharts.value) {
      const { today, yesterday } = curr;
      const _option = JSON.parse(JSON.stringify(option));
      _option.series[0].data = today
      _option.series[1].data = yesterday
      echartsCharts.value.setOption(_option);
    }
  }
);
const init = () => {
  echartsCharts.value = new Echarts.init(echartsContainer.value);
  echartsCharts.value.setOption(option);
};
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.statistical-container {
  width: 100%;
  height: 100%;
  display: flex;
  .echarts-container {
    flex: 1;
  }
}
</style>